<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('上传图片')}" />
    <th:block th:insert="~{include :: datetimepicker-css}" />
    <th:block th:insert="~{include :: summernote-css}" />
    <th:block th:insert="~{include :: bootstrap-fileinput-css}" />
    <style>
        #node-img .file-input-ajax-new{
            width: 100%;

        }
    </style>
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <div class="row">
        <div class="col-12 invoice-info">
            <h4>
                <i class="fa fa-image"></i> <span th:text="${pictureAlbum.title}"></span>
                <small class="float-right" th:text="${#strings.replace(pictureAlbum.createTime,'T',' ')}"></small>
            </h4>
        </div>
        <div class="col-12 invoice-info bg-gray-light">
            <label class="col-form-label mr-5">
                频道：<span class="text-blue" th:text="${channel !=null?channel.channelName:'未知'}"></span>
            </label>
            <label class="col-form-label mr-5">
                分类：<span class="text-blue" th:text="${pictureAlbum.categoryName}"></span>
            </label>
            <label class="col-form-label">
                上传者：<span class="text-red" th:text="${pictureAlbum.userName} + '( userId：'+ ${pictureAlbum.userId} + ' )'"></span>
            </label>
        </div>
    </div>
    <form class="form-horizontal m" id="form-node-add">
        <br>
        <div class="form-group row">
            <label class="col-sm-1 col-form-label is-required text-sm-right">统一定价</label>
            <div class="col-sm-3">
                <input id="price" name="price" class="form-control" value="0" type="text">
            </div>
            <label class="col-sm-1 col-form-label is-required text-sm-right">统一等级</label>
            <div class="col-sm-3">
                <select id="levelId" name="levelId" class="form-control m-b" th:with="type=${memberTypes}" required>
                    <option value="0">普通</option>
                    <option th:each="dict : ${type}" th:text="${dict.title}" th:value="${dict.id}"></option>
                </select>
            </div>
        </div>
        <!--选择图片-->
        <div class="form-group row" id="node-img">
            <div class="col-sm-10 file-loading">
                <input id="fileinput-demo-1" name="file" type="file" multiple>
            </div>
        </div>

    </form>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: datetimepicker-js}" />
<th:block th:insert="~{include :: summernote-js}" />
<th:block th:insert="~{include :: bootstrap-fileinput-js}" />
<script type="text/javascript">

    var prefix = "/picture/album/content";
    var fromData;
    var albumId = [[${pictureAlbum.id}]];

    $(function () {
        initFileInput("fileinput-demo-1");
    })

    function initFileInput(ctrlName) {
        var control = $('#' + ctrlName);
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl:  prefix+'/upload.json', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png','jpeg'],//接收的文件后缀
            uploadExtraData: function() {
                return fromData;
            },
            uploadAsync: false , //默认异步上传
            //showUpload: true, //是否显示上传按钮
            // showRemove : true, //显示移除按钮
            //showPreview : true, //是否显示预览
            showCaption: false,//是否显示标题
            layoutTemplates: {
                // actionUpload: '', //去除上传预览缩略图中的上传图片
                //  actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
                //  actionDownload:'' ,//去除上传预览缩略图中的下载图标
                //actionDelete:'', //去除上传预览的缩略图中的删除图标
            },
            // browseClass: "btn btn-primary", //按钮样式
            enctype: 'multipart/form-data',
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on('filepreupload', function(event, data, previewId, index) {     //上传中
            var form = data.form, files = data.files, extra = data.extra,
                response = data.response, reader = data.reader;
            $.modal.loading();
        }).on("fileuploaded", function (event, data, previewId, index) {
            console.log('文件上传成功！');
            var json = data.response;
            if(json.code > 0){
                $(".progress").hide();
                $(".kv-upload-progress").hide();
                $.modal.closeLoading();
                $.modal.alertWarning(json.msg);
            }else {
                $.modal.closeLoading();
                //$.modal.alertSuccess(json.msg);
            }
        })
    }

    //传递参数
    $('#fileinput-demo-1').on('filepreajax', function(event, previewId, index) {
        var price = $("#price").val();
        var levelId = $("#levelId").val();
        fromData ={"albumId": albumId, "price":price, "levelId":levelId};
    });

    //上传完成延时关闭
    $('#fileinput-demo-1').on('filebatchuploadcomplete',function (event,files,extra) {
        setTimeout(function(){
            parent.$.modal.closeAll();
        },1000);
    });
</script>
</body>
</html>